<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色编辑</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="../../../css/animate.css" rel="stylesheet">

    <link href="../../../css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="../../../css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
    <link href="../../../js/plugins/ztree/css/metroStyle/metroStyle.css" rel="stylesheet">
    <link href="../../../css/style.css" rel="stylesheet">
    <style type="text/css">
        [v-clock] {
            display: none !important;
        }
        .ico-list .fa{
            margin: 5px;
            padding: 5px;
            cursor:pointer;
            font-size: 18px;
            width: 28px;
            border-radius: 3px;
        }
        .ico-list .fa:hover {
            background-color: #1d9d74;
            color: #ffffff;
        }
    </style>
</head>

<body style="background-color: #ffffff;" >
    <div class="wrapper wrapper-content animated fadeInRight ibox-content" id="ycapp" v-cloak>
        <form class="form-horizontal" role="form" method="post" id="menuEditForm">
            <div class="form-group">
                <label class="col-sm-3 control-label">上级菜单</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" v-model="menu.parentName" @click="getMenuTree">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">类型</label>
                <div class="col-sm-8">
                    <ui-checkbox v-model="menu.type" label="目录" dvalue="0" name="type"></ui-checkbox>
                    <ui-checkbox v-model="menu.type" label="菜单" dvalue="1" name="type"></ui-checkbox>
                    <ui-checkbox v-model="menu.type" label="按钮" dvalue="2" name="type"></ui-checkbox>
                </div>
            </div>
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-3 control-label ">菜单名称</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="inputEmail3" v-model="menu.name">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">菜单链接</label>
                <div class="col-sm-8">
                    <input type="text" id="url" name="url" class="form-control" v-model="menu.url">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">授权标识</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" v-model="menu.perms">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">排序号</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" v-model="menu.orderNum">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">图标</label>
                <div class="col-sm-8">
                    <input type="text" class="form-control" id="icon" v-model="menu.icon" @click="openIcon">
                </div>
            </div>

            <div class="line line-dashed line-lg pull-in"></div>
            <div class="form-group" >
                <div class="col-sm-12 col-sm-offset-2" style="text-align: center;">
                    <button type="button" onclick="parentLayerClose()" class="btn btn-default">取消</button>
                    &nbsp;&nbsp;
                    <button type="button" @click="saveOrupdate" class="btn btn-primary">确定</button>
                </div>
            </div>
        </form>
    </div>
    <div id="tong" style="display: none;/*background:#f3f3f4;*/">
        <div id="menuTree" class="ztree treeselect"></div>
    </div>
    <!-- Mainly scripts -->
    <script src="../../../js/jquery-2.1.1.js"></script>

    <script src="../../../js/plugins/layer/layer.js"></script>
    <script src="../../../js/plugins/ztree/jquery.ztree.all.min.js"></script>
    <!-- iCheck -->
    <script src="../../../js/plugins/iCheck/icheck.min.js"></script>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/common.js"></script>
    <!-- 校验 -->
    <script src="../../../js/plugins/validate/jquery.validate.min.js"></script>
    <script src="../../../js/plugins/validate/messages_zh.min.js"></script>
    <script src="../../../js/plugins/validate/jquery.validate.extend.js"></script>

    <script>
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "menuId",
                    pIdKey: "parentId",
                    rootPId: -1
                },
                key: {
                    url:"nourl"
                }
            },
            view:{
                selectedMulti:false
            }
        };
        var uiCheckbox = Vue.extend({
            name: 'ui-checkbox',
            template: '<label class="checkbox-inline i-checks">\
                            <input type="radio" v-model="value" :value="dvalue" :name="name" @click="test"><i></i>{{label}}\
                        </label>',
            props: ['name','label','value', 'dvalue'],
            mounted: function(){
                $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                });
            },
            updated: function(){
                $('.i-checks').iCheck({
                    checkboxClass: 'icheckbox_square-green',
                    radioClass: 'iradio_square-green',
                });
            },
            methods: {
                test: function(){
                    console.log(1);
                }
            }
        });
        Vue.component('uiCheckbox',uiCheckbox);
        $('#menuEditForm').validate({
            rules:{
                url:{
                    required: true
                }
            },
            messages:{
                url:{
                    required:"请输入链接"
                }
            },
            submitHandler:function(form){
                vm.saveOrupdate();
            }
        });

        var ztree;
        var vm = new Vue({
            el:'#ycapp',
            data:{
                title:null,
                menu:{
                    menuId:GetQueryString("menuId"),
                    parentId:'',
                    parentName:'',
                    orderNum:0,
                    type:'1'
                }
            },
            methods: {
                saveOrupdate: function(){
                    var url = vm.menu.menuId == null ? "sysMenu/save" : "sysMenu/update";
                    vm.menu.icon = $("#icon").val();
                    var type = $("input[name='type']:checked").val();
                    vm.menu.type = type;
                    $.ajax({
                        type: "POST",
                        url: baseURL + url,
                        contentType: "application/json",
                        data: JSON.stringify(vm.menu),
                        success: function(r){
                            handleSuccess(r);
                        }
                    });
                },
                getMenuTree: function() {
                    layer.open({
                        type: 1,
                        title: false,
                        closeBtn: 0,
                        area: ['316px','216px'],
                        //skin: 'layui-layer-nobg', //没有背景色
                        shadeClose: true,
                        content: $('#tong'),
                        btn: ['确定', '取消'],
                        yes: function(index, layero){
                            // 获取选中的node，selectedNode.menuId和selectedNode.name
                            var selectedNode = ztree.getSelectedNodes();
                            vm.menu.parentId = selectedNode[0].menuId;
                            vm.menu.parentName = selectedNode[0].name;
                            layer.close(layer.index);
                        }
                    });
                },
                openIcon:function(){
                    layer.open({
                        type: 2,
                        title: false,
                        closeBtn: 0,
                        area: '516px',
                        shadeClose: true,
                        content: 'icon.html'
                    });
                },
                getMenu:function (menuId) {
                    if(menuId != null && menuId != ""){
                        $.getJSON(baseURL + "sysMenu/info/"+menuId, function(r){
                            if(r.code == '0'){
                                vm.menu = r.menu;
                            }else{
                                $.modalAlert(r.msg, modal_status.FAIL);
                            }
                        });
                    }
                    // 加载菜单树
                    $.get(baseURL + "sysMenu/list", function(r){
                        ztree = $.fn.zTree.init($("#menuTree"), setting, r.menuList);
                        // 展开节点
                        var node,parentNode;
                        if(vm.menu !=null && vm.menu.parentId != ""){
                            node = ztree.getNodeByParam("menuId", vm.menu.menuId);
                            parentNode = ztree.getNodeByParam("menuId", vm.menu.parentId);
                            vm.menu.parentName = parentNode ? parentNode.name : "无";
                        } else {
                            var nodes = ztree.getNodes();
                            node = nodes[0];
                            if(vm.menu != null){
                                vm.menu.parentName = node.name;
                            }
                        }
                        ztree.selectNode(node);
                    });
                }
            },
            created: function(){
                //此时vue还没有被创建出来.需要this
                //vm.menu.menuId要使用this.menu.menuId;
                if (this.menu.menuId != ""){
                    this.getMenu(this.menu.menuId);
                } else {
                    this.getMenu();
                }
            }
        });
    </script>
</body>

</html>
